<template lang="pug">
.survey-content-container
  .survey-content-header
    .survey-content-title 供应商生产概况
  el-form(:model="form" :rules="yieldRules" ref="yieldRules" label-width="150px" class="form-section-module" size="small")
    .survey-form
      .survey-form-title
        span 人力资源
        label
      .form-section
        el-form-item(label="员工总人数：" prop="totalEmployees")
          .form-item-small
            el-input(v-model="form.totalEmployees" placeholder="请输入人数" type="number")
              .form-item-input_ft(slot="suffix") 人
        el-form-item(label="管理人员人数：" prop="management")
          .form-item-small
            el-input(v-model="form.management" placeholder="请输入人数" type="number")
              .form-item-input_ft(slot="suffix") 人
        el-form-item(label="技术人员人数：" prop="technician")
          .form-item-small
            el-input(v-model="form.technician" placeholder="请输入人数" type="number")
              .form-item-input_ft(slot="suffix") 人
        el-form-item(label="工人人数：" prop="worker")
          .form-item-small
            el-input(v-model="form.worker" placeholder="请输入人数" type="number")
              .form-item-input_ft(slot="suffix") 人
    .survey-form
      .survey-form-title
        span 生产概况
        label
      .form-section
        el-form-item(label="设备总台（套）数：" prop="totalEquipmentNumber")
          .form-item-small
            el-input(v-model="form.totalEquipmentNumber" placeholder="请输入数值" type="number")
              .form-item-input_ft(slot="suffix") 台（套）
        el-form-item(label="进口总台（套）数：" prop="importedEquipmentNumber")
          .form-item-small
            el-input(v-model="form.importedEquipmentNumber" placeholder="请输入数值" type="number")
              .form-item-input_ft(slot="suffix") 台（套）
        el-form-item(label="国产总台（套）数：" prop="domesticNumber")
          .form-item-small
            el-input(v-model="form.domesticNumber" placeholder="请输入数值" type="number")
              .form-item-input_ft(slot="suffix") 台（套）
        el-form-item(label="主要原材料名称及来源：" prop="materialOriginal")
            el-input(type="textarea" placeholder="请输入主要原材料名称及来源" v-model="form.materialOriginal" resize="none" rows="10" maxlength="500" show-word-limit)
        el-form-item(label="主要生产设备名称、产地、价值：" prop="otherInformation")
            el-input(type="textarea" placeholder="请输入主要生产设备名称、产地、价值" v-model="form.otherInformation" resize="none" rows="10" maxlength="500" show-word-limit)
        el-form-item(label="固定资产：" prop="fixedAssets")
          .form-item-small
            el-input(v-model="form.fixedAssets" placeholder="请输入固定资产（原值）" type="number")
              .form-item-input_ft(slot="suffix") 万元
        el-form-item(label="年生产产能：" prop="annualProductionCapacity")
          .form-item-small
            el-input(v-model="form.annualProductionCapacity" placeholder="请输入年生产产能 " type="number")
              .form-item-input_ft(slot="suffix") 万元
        el-form-item(label="新品研发能力：" prop="researchProductivity")
          el-radio-group(v-model="form.researchProductivity")
            el-radio(v-for="item in dropDwon.researchProductivityList" :key="item.dicTypeValueId" :label="item.dicTypeValueId") {{item.dicTypeValue}}
  .survey-section-footer
    el-button(name="survey" plain @click="prevStep") 上一步，填写商品销售概况
    el-button(name="survey" @click="nextStep") 下一步，选择质量保证能力
</template>

<script>
export default {
  name: 'yieldModule',
  props: {
    dropDwon: Object,
    parentForm: Object
  },
  data () {
    return {
      form: {
        totalEmployees: '',
        management: '',
        technician: '',
        worker: '',
        totalEquipmentNumber: '',
        importedEquipmentNumber: '',
        domesticNumber: '',
        materialOriginal: '',
        otherInformation: '',
        annualProductionCapacity: '', // 年生产产能
        fixedAssets: '',
        researchProductivity: ''
      },
      yieldRules: {
        totalEmployees: [ { required: true, message: '请输入员工总人数！', trigger: 'blur' } ],
        management: [ { required: true, message: '请输入管理人员人数！', trigger: 'blur' } ],
        technician: [ { required: true, message: '请输入技术人员人数！', trigger: 'blur' } ],
        worker: [ { required: true, message: '请输入工人人数！', trigger: 'blur' } ],
        totalEquipmentNumber: [ { required: true, message: '请输入设备总台（套）数！', trigger: 'blur' } ],
        importedEquipmentNumber: [ { required: true, message: '请输入进口总台（套）数！', trigger: 'blur' } ],
        domesticNumber: [ { required: true, message: '请输入国产总台（套）数！', trigger: 'blur' } ],
        materialOriginal: [ { required: true, message: '请输入主要原材料名称及来源！', trigger: 'blur' } ],
        otherInformation: [ { required: true, message: '请输入主要生产设备的名称、产地、价值！', trigger: 'blur' } ],
        annualProductionCapacity: [ { required: true, message: '请输入年生产产能！', trigger: 'blur' } ],
        fixedAssets: [ { required: true, message: '请输入年生产产能！', trigger: 'blur' } ],
        researchProductivity: [ { required: true, message: '请选择新品研发能力！', trigger: 'change' } ],
      }
    }
  },
  methods: {
    prevStep () {
      this.$emit('change', { form: this.form, nextRouter: 'sales' })
    },
    nextStep () {
      this.$refs.yieldRules.validate((valid) => {
        if (!valid) {
          this.$message.error('请仔细核对资料填写是否正确！')
          return
        }
        this.$emit('change', { form: this.form, nextRouter: 'quality' })
      })
    },
  },
  created () {
    this.form = { ...this.form, ...this.parentForm }
  }
}
</script>

<style lang="scss" scoped>
.survey-content-container {
  width: 100%;
  background: #fff;
  padding: 25px 22px;
}
.survey-content-header {
  display: flex;
  .survey-content-title {
    padding: 10px 16.5px;
    border-radius: 0 50px 50px 0;
    background: #D7000F;
    font-size: 18px;
    line-height: 26px;
    color: #fff;
  }
}
.survey-form {
  margin-top: 5px;
  .survey-form-title {
    display: flex;
    align-items: center;
    padding: 16px 0;
    span {
      display: inline-block;
      font-size: 16px;
      line-height: 26px;
      padding-right: 10px;
    }
    label {
      height: 1px;
      flex: 1;
      background: #EDEDED;
    }
  }
}
.form-section {
  background: #F6F6F9;
  border-radius: 6px;
  padding: 25px 20px;
  &.form-small-section {
    margin-bottom: 16px;
  }
}
.form-item-small {
  width: 275px;
}
.form-item-input_ft {
  padding: 0 10px;
  color: #000;
  line-height: 32px;
}
.survey-section-footer {
  margin-top: 22px;
  padding: 10px 0;
  text-align: center;
}
</style>